<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户增加</title>
    <link rel="stylesheet" type="text/css" href="/static/css/addUser.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="/static/css/homepage.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">

</head>

<body>
    <div id="indextop" class="header header2 header-theme-none">
        <div class="logo fl">
            <a href="/index"></a>
        </div>
        <div class="nav fl">
            <a href="/index">首页</a>
            <c:if test="${user.role.id == 1}">
                <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                    <a target="_blank" style="cursor: pointer;">用户管理</a>
                    <ul id="solutionul">
                        <div style="height:10px;"></div>
                        <li class="solutionli">
                            <a href="/user/findAllUser?page=1">用户列表</a>
                        </li>
                        <li class="solutionli">
                            <a href="/user/addUser">用户增加</a>
                        </li>

                        <div style="height:10px;"></div>
                    </ul>
                </div>
            </c:if>
            <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                <a target="_blank" style="cursor: pointer;">统计信息</a>
                <ul id="solutionul">
                    <div style="height:10px;"></div>
                    <c:if test="${user.role.id == 1}">
                        <li class="solutionli">
                            <a href="/log/getUserStatistics?page=1">访问统计</a>
                        </li>
                        <li class="solutionli">
                            <a href="/log/getAllLog?page=1">用户访问</a>
                        </li>
                    </c:if>
                    <li class="solutionli">
                        <a href="/log/getLog?userId=${user.id}&page=1">个人访问</a>
                    </li>
                    <div style="height:10px;"></div>
                </ul>
            </div>
        </div>
        <style>
            #solutiontop{
                color: #357ae8;
            }
            #solutiontop:hover{
                /* 这里用auto有时无效，如果高度小于元素加起来的高度有bug */
                height: 500px !important;
                color: #357ae8;
            }
            #solutionul{
                overflow: hidden;
                clear: both;
                background: white;
                width: 120px;
                margin: -5px;
                box-shadow: 0px 0px 5px 1px rgba(80,80,80,0.4);
                position: relative;
                z-index: 1;
            }
            .solutionli a{
                width: 100%;
                text-align: center;
                box-sizing: border-box;
                color: #333 !important;
                padding: 0 10px !important;
                height: 40px !important;
                line-height: 40px !important;
            }
            .solutionli{
                height: 40px;
            }
        </style>
        <div class="log-reg fr">
            <a href="#" class="userName" style="">${user.name}</a>
            <a href="/outLogin" class="outLogin">退出登录</a>

        </div>

    </div>

    <div class="home-page">

        <div class="wapper">
            <div class="title">
                    <span>
                        用户增加
                    </span>
            </div>
            <div class="line"></div>
            <div class="form">
                <form>
                    <table>
                        <tr>
                            <td>
                                <input id="userName" type="text" placeholder="用户名"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="password" type="password" placeholder="密码"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="email" type="text" placeholder="邮箱"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="name" type="text" placeholder="姓名"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <select id="role">
                                    <c:forEach items="${allRole}" var="role">
                                        <option value="${role.id}">
                                                ${role.name}
                                        </option>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>
                        <tr id="grade" style="display: none">
                            <td>
                                <select class="grade">
                                    <c:forEach items="${allGrade}" var="grade">
                                        <option value="${grade.id}">
                                                ${grade.name}
                                        </option>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button id="register-button" type="submit">注册</button>
                            </td>
                        </tr>

                    </table>

                </form>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/main.js"></script>
    <script>
        $("#register-button").click(function (event) {
            event.preventDefault();

            var emailFormat = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;

            var userName = $("#userName").val();
            var password = $("#password").val();
            var email = $("#email").val();
            var name = $("#name").val();
            var roleId = $("#role option:selected").val();
            var gradeId = $('.grade option:selected').val();
            if(userName === '' || password === '' || email === '' || name === '' || roleId === '') {
                alert("信息不能为空");
                return;
            }else if(userName.length > 20) {
                alert("用户名过长");
                return;
            }
            else if(password.length > 20) {
                alert("用户名过长");
                return;
            }
            else if(! emailFormat.test(email)) {
                alert("邮箱格式不对");
                return;
            }

            var data = {
                userName: userName,
                password: password,
                email: email,
                name: name,
                role: {
                    id: roleId
                },
                grade: {
                    id: gradeId
                }
            };
            // 这里要把json转成为string不然可能会出现传值出现乱码
            data = JSON.stringify(data);
            //前端与后台的交互
            $.ajax({
                type: 'POST',
                url: '/user/addUser',
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if(data.code === 1) {
                        alert(data.msg);
                    }else if (data.code === 0) {
                        alert(data.msg);
                    }
                }
            });
        })
    </script>
</body>
</html>